$('#header').load('header.html')
$('#footer').load('footer.html')
let oMedia = document.querySelector('#main')
        pAjax({
            url: '../server/detail.php',
            data: {
                id: localStorage.getItem('detailId') - 0
            }
        }).then(function (res) {
            let json = JSON.parse(res)
            console.log(json)

            oMedia.innerHTML = `<section class="left">
            <div class="big">
                <div class="shou"></div>
                <img src="${json.goods_introduce}" alt="">
            </div>
            <div class="small">
                <p>
                    <img src="https://www.boncake.com.cn/public/images/7c/ed/5c/ff997d45ecd9fa5d174d981344d41cbda7be03a6.jpg?1592390198#h" alt="">
                    <img src="https://www.boncake.com.cn/public/images/d4/b9/23/15475543beeb5020ee73ef05ffe20223ec687685.jpg?1592390199#h" alt="">
                    <img src="https://www.boncake.com.cn/public/images/94/da/fb/c2a1e0b4bbf6f892b2b11500e1e11fcdc4debfd3.jpg?1592390199#h" alt="">
                    <img src="https://www.boncake.com.cn/public/images/ed/7f/3a/f6449d460ab2d554897987d548c7f0b22d854fe4.jpg?1592390199#h" alt="">
                </p>
            </div>
        </section>
        <div class="x2">
            <section><img data-id="${json.goods_id}" src="${json.goods_introduce}" alt=""></section>
        </div>
        <section class="right">
            
                <p class="en-name">${json.goods_name}</p>
                <p class="cn-name">${json.cat_one_id}</p>
                <div class="cake-price">
                 
                  <div class="price-wrap">
                                <div class="price-wrap-money"><span class="small1">¥</span><span class="big1">${json.goods_price}</span></div>
                              </div>
                
                  
                </div>
                        <p class="cake-type">Cake type | 蛋糕种类</p>
                <p class="cake-small-name">${json.cat_one_id}</p>
                        <div class="cake-num" id="product-buy-quantity"><span class="label">数量: </span><input type="text" name="goods[num]" class="cake-input" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" id="action-quantity-input" value="1" min="1" max="999999"><img id="num-emit" class="double-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/double-icon.png" alt=""><input type="hidden" name="stock" value="999999">
                        <div class="aon"></div>
                        <div class="adown"></div>
                        </div>
              
                        <div class="cake-size">
                  <span class="label">尺寸:</span>
                    
                  <input class="cake-input" value="1.8磅" data-xx="1592390117171|1592390117171" id="size_spec" type="text">
                              <img id="size2-emit" class="double-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/double-icon.png" alt="">
                  <div class="cake-size2-son">
                              
                </div>
               
                <div class="eat-people" id="people_count">
                  <span class="eat-text">1.8磅</span>
                  <span></span>
                </div>
                <div class="cake-book">
                            <span>10:00 - 20:00</span>
                          </div>
                      
                <div class="buy-btn">
                  <button class="action-addtocart join-cart" type="submit" rel="_request">
                    <img class="cart-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/btn-cart-icon.png" alt="">
                    <div class="join-cart-text">加入购物车</div>
                  </button>
                                <button type="submit" class="action-buynow buy-now" value="立即购买" rel="_request">立即购买</button>
                            </div>
                        <div class="sweet-level">
                  <span>Sweetness level | 甜度</span>
                </div>
                <div class="stars">
                            <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                            <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                            <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                            <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-light-icon.png" alt="">
                            <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-light-icon.png" alt="">
        
                          </div>
                <div class="store">
                  <span>Preservation conditions｜保鲜条件</span>
                </div>
                <div class="store-desc">
                             <span>最佳保存温度10°C，最佳赏味期为24小时内<br>食用前请在室温下放置20分钟，口感更佳</span>
                         </div>
                      
        </section>`






        $('#xuanxiang ul li').click(function(){
            $('#xuanxiang ul li').removeClass('bg')
            $(this).addClass('bg')
            let index=$(this).index()
            console.log(index)
            $('#xuanxiang section').removeClass('active')
            $('#xuanxiang section').eq(index).addClass('active')
        })
        $('#main section .small img').click(function(){
            let a=document.querySelector('#main section .big img')
            let b=document.querySelector('#main .x2 section img')
            console.log(b)
            a.src=$(this).attr('src')
            b.src=$(this).attr('src')
        })
        
        
        
        
        let inow=1
        let value=document.querySelector('#main .right .cake-num #action-quantity-input')
        $('#main .right .cake-num .aon').click(function(){
            inow++
            value.value=inow
            console.log(value)
        })
        $('#main .right .cake-num .adown').click(function(){
            inow--
            if(inow<1){
                inow=1
            }
            value.value=inow
        })
        
        
        
        
        
        
        
        $('#main section .big').hover(function () {
            $('#main section .big .shou').css('display', 'block')
            $('#main .x2').css('display', 'block')
        },
        function(){
            $('#main section .big .shou').css('display', 'none')
            $('#main .x2').css('display', 'none')
        })
        
        $('#main section .big').mousemove(function(ev){
        var x = ev.pageX - $('#main section .big .shou').width() * 1.65
        var y = ev.pageY - $('#main section .big .shou').height() *1.0
        
        
        
        if (x < 0) {
            x = 0
        } else if (x >= $('#main section .big').width() - $('#main section .big .shou').width()) {
            x = $('#main section .big').width() - $('#main section .big .shou').width()
        }
        
        if (y < 0) {
            y = 0
        } else if (y >= $('#main section .big').height() - $('#main section .big .shou').height()) {
            y = $('#main section .big').height() - $('#main section .big .shou').height()
        }
        
        $('#main .x2 section').css('left',  -x * ($('#main .x2 section').width() - $('#main .x2').width()) / ($('#main section .big').width() - $('#main section .big .shou').width()) + 'px') 
        $('#main .x2 section').css('top',  -y * ($('#main .x2 section').height() - $('#main .x2').height()) / ($('#main section .big').height() - $('#main section .big .shou').height()) + 'px') 
        // console.log($('.bigImg').offset().top, $('.bigImg').offset().left)
        // console.log( - x * ($('.bigImg').width() - $('.big').width()) / ($('.small').width() - $('.mask').width()) + 'px')
        $('#main section .big .shou').css('left',  x + 'px')
        $('#main section .big .shou').css('top', y + 'px')
        })
        


let arr=[]
   
$('#main .right .buy-btn .join-cart').click(function(){
    alert('已成功添加购物车')
    let id = $('#main .x2 section img').attr('data-id')
    let n = $('#main .x2 section img').attr('data-id')
    
        let iNow = 0
        // 去重
        function findArr(arr, n) {
            for (let i = 0; i < arr.length; i++) {
                // 有相同去++
                if (arr[i].id-0 === n-0) {
                    iNow = i
                    return true
                }
            }
            return false
        }

        let flag = findArr(arr)
        if (flag) {
            // count++
            arr[iNow].count++
        } else {
            // 没有值去填一个新对象
            arr.push({
                id: json.goods_id,
                img: json.goods_introduce,
                price: json.goods_price,
                name: json.goods_name,
                count: 1,
                flag: false
            })
        }

        console.log(arr)
        localStorage.setItem('zzh_shop', JSON.stringify(arr))
        // 存到本地
    
})
$('#main .right .buy-btn .buy-now').click(function(){
    window.location.href = '../html/zzh_shop.html'
})
$('.pro-media .pro-media-desc .pro-buy').click(function(){
    let iNow = 0
        // 去重
        function findArr(arr, n) {
            for (let i = 0; i < arr.length; i++) {
                // 有相同去++
                if (arr[i].id-0 === n-0) {
                    iNow = i
                    return true
                }
            }
            return false
        }

        let flag = findArr(arr)
        if (flag) {
            // count++
            arr[iNow].count++
        } else {
            // 没有值去填一个新对象
            let id=4
            arr.push({
                id: id,
                img: json.goods_introduce,
                price: json.goods_price,
                name: json.goods_name,
                count: 1,
                flag: false
            })
        }

        console.log(arr)
        localStorage.setItem('zzh_shop', JSON.stringify(arr))
        // 存到本地
    
    alert('已成功添加购物车')
})
$('.pro-media .pro-img-box').click(function(){
    let sr = $('.pro-media .pro-img-box .pro-pic')
                window.location.href = 'hlxiangqing.html'
                localStorage.setItem('detailIdsr', sr)
})
})